/**
* 图表界面
*/
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>

      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
        </div>
      </el-col>

      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="ClickEchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <div>
      <el-row :gutter="23">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payEchart"></div>
          </div>
        </el-col>

        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payNumEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
import {prodInventory, prodInventoryIn, prodInventoryRemove, prodInventorySale} from "../../api/chartMG";
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      //  客户统计
      SCEoption: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          data: [{
            name: '客户人数统计',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '客户人数统计',
          type: 'bar',
          barGap: 0,
          //改这里
          data: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          }
        }]
      },


      //  八段锦客户等级统计
      SUMoption: {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          data: [{
            name: '八段锦客户等级统计',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '八段锦客户等级统计',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [],
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
      payoption: {
        backgroundColor: '#546577',
        title: {
          text: '足道用户等级统计',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          data: [{ name: '足道用户等级统计', icon: 'rect' }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [
          {
            name: '客户(个数)',
            type: 'line',
            data: [],
            barWidth: 10,
            itemStyle: {
              color: "#108ff9"
            }
          }
        ]
      },
      payNumoption: {
        backgroundColor: '#2c343c',
        title: {
          text: '太极等级客户统计',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          data: [{ name: '太极等级客户统计', icon: 'rect' }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#ffffff"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#ffffff"
            }
          }
        },
        series: [
          {
            name: '太极等级客户统计',
            type: 'line',
            data: [],
            barWidth: 10,
            itemStyle: {
              color: "#108ff9"
            }
          }
        ]
      },
      payChart: null,
      payNumChart: null,
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    // 用模拟数据替代 payoption

    // 保留其他图表的真实数据
    this.getSUM();
    this.getSCE();
    this.getpay();
    this.getpayNum()
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 交易总笔数
    getSCE() {

      //发送异步请求
      prodInventoryIn().then(res => {
        console.log(res);
        this.SCEoption.xAxis.data = res.data.data.name; // 绑定 xAxis 数据
        this.SCEoption.series[0].data = res.data.data.value; // 绑定 series 数据
        this.chart = Chart.init(this.$refs.SCEchart)

        this.chart.setOption(this.SCEoption)

      }).catch(err => {
        console.log(err)
      })

      this.chart = Chart.init(this.$refs.SCEchart);
      this.chart.setOption(this.SCEoption);

    },
    // 交易总金额
    getSUM() {

      //发送异步请求
      prodInventoryRemove().then(res => {
        console.log(res);
        this.SUMoption.xAxis.data = res.data.data.name; // 绑定 xAxis 数据
        this.SUMoption.series[0].data = res.data.data.value; // 绑定 series 数据
        this.chart = Chart.init(this.$refs.SUMEchart)

        this.chart.setOption(this.SUMoption)

      }).catch(err => {
        console.log(err)
      })


    },
    // 总点击量
    getClick() {
      this.chart = Chart.init(this.$refs.ClickEchart)
      this.chart.setOption(this.Clickoption)
    },
    // 库存量
    getpay() {
      prodInventorySale().then(res => {
        console.log(res);
        // 拆分后端返回的{name, value}数组为x轴和y轴
        this.payoption.xAxis.data = res.data.data.name;
        this.payoption.series[0].data = res.data.data.value;
        this.payChart = Chart.init(this.$refs.payEchart);

        this.payChart.setOption(this.payoption);
      })
        .catch(error => {
          this.$message.error('获取数据失败');
          console.log(error)
        })
    },

    getpayNum() {
      prodInventory().then(res => {
        console.log(res);
        // 拆分后端返回的{name, value}数组为x轴和y轴
        this.payNumoption.xAxis.data = res.data.data.name;
        this.payNumoption.series[0].data =res.data.data.value;
        this.payNumChart = Chart.init(this.$refs.payNumEchart);
        this.payNumChart.setOption(this.payNumoption);
      })
        .catch(error => {
          this.$message.error('获取数据失败');
          console.log(error)
        })
    }

  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
